<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="handleCancel"
    destroyOnClose
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container>
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplierName">
                <a-input v-model="model.supplierName" placeholder="请输入供应商名称" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="待付款" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="purchasePrice">
                <a-input-number v-model="model.amountToBePaid" placeholder="请输入应付款" style="width: 100%" disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="已付款" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="amountPaid">
                <a-input-number :value="getRemitMoney(model.amountPaid)" style="width: 100%" disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="付款金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remitMoney">
                <a-input-number v-model="model.remitMoney" placeholder="请输入付款金额" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="付款账户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remitAccountId">
                <a-select
                  show-search
                  :allowClear="true"
                  placeholder="请选择付款账户"
                  option-filter-prop="children"
                  v-model="model.remitAccountId"
                  style="width: 100%"
                  :filter-option="filterOptionAccount"
                  @change="changeAccount">
                  <a-select-option :value="item.id" v-for="(item,index) in accountData" :key="index">
                    {{item.accountName}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                <a-input v-model="model.remitRemark" placeholder="请输入备注" style="width: 100%" />
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="depositoryMaterialNum">
                <a-upload
                  name="file"
                  :action="uploadAction"
                  :headers="headers"
                  :fileList="fileList"
                  @change="handleChange"
                  :beforeUpload="doBeforeUpload"
                >
                  <a-button> <a-icon type="upload" />点击上传</a-button>
                </a-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
    <a-button type="primary" @click="handleOk" style="width: 100%;">保存</a-button>
  </a-drawer>

  <!--<j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">



  </j-modal>-->

</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import {validateDuplicateValue} from "../../../../../utils/util";
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import Vue from "vue";

  export default {
    name: 'pendingPaymentModal',
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        uploadAction: window._CONFIG['domianURL'] + "/sys/oss/file/upload",
        headers:{},
        title:'',
        width:'100%',
        visible: false,
        disableSubmit: false,
        uploadGoOn:true,
        fileList:[],
        accountData:[],
        model:{
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          remitMoney: [{ required: true, message: '付款金额不能为空' },{"pattern": /^\d+(?=\.{0,1}\d+$|$)/,"message": "只能输入正数"}],
          remitAccountId: [{ required: true, message: '付款账户不能为空' }],
        },
        url: {
          add: "/GhFinancePurchaseRemitOrder/add",
          queryAccountList: "/GhFinancePurchaseRemitOrder/queryAccountList",
        }
      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token};
      this.initAccountData();
    },
    methods: {
      doBeforeUpload(file){
        this.fileList = [];
        this.uploadGoOn=true
        const isLt10M = file.size / 1024 / 1024 < 20
        if (!isLt10M) {
          this.$message.error('上传文件大小不能超过 20MB!')
          this.uploadGoOn=false
          return false;
        }
        return true
      },
      handleChange(info) {
        if(!info.file.status && this.uploadGoOn === false){
          info.fileList.pop();
        }
        let fileList = info.fileList
        if(info.file.status==='done'){
          if(this.number>0){
            fileList = fileList.slice(-this.number);
          }
          if(info.file.response.success){
            fileList = fileList.map((file) => {
              if (file.response) {
                /*let reUrl = file.response.message;
                file.url = getFileAccessHttpUrl(reUrl);*/
                file.url = file.response.result;
              }
              return file;
            });
          }
          //this.$message.success(`${info.file.name} 上传成功!`);
        }else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} 上传失败.`);
        }else if(info.file.status === 'removed'){
          this.handleDelete(info.file)
        }
        this.fileList = fileList
        if(info.file.status==='done' || info.file.status === 'removed'){
          //returnUrl为true时仅返回文件路径
          if(this.returnUrl){
            this.handlePathChange()
          }else{
            //returnUrl为false时返回文件名称、文件路径及文件大小
            this.newFileList = [];
            for(var a=0;a<fileList.length;a++){
              // update-begin-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
              if(fileList[a].status === 'done' ) {
                var fileJson = {
                  fileName:fileList[a].name,
                  filePath:fileList[a].response.message,
                  fileSize:fileList[a].size
                };
                this.newFileList.push(fileJson);
              }else{
                return;
              }
              // update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
            }
            this.$emit('change', this.newFileList);
          }
        }
      },
      add (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {

            if (this.model.remitMoney > this.model.amountToBePaid){
              this.$message.error("付款金额不能大于待付款金额");
              return;
            }

            if (this.model.remitMoney == 0){
              this.$message.error("付款金额不能为0");
              return;
            }

            that.confirmLoading = true;
            let httpurl = this.url.add;
            let method = 'post';
            let params = {};
            params.supplierName = this.model.supplierName;
            params.supplierId = this.model.supplierId;
            params.inDepositoryNo = this.model.purchaseNo;
            params.remitMoney = this.model.remitMoney;
            params.realityRemitMoney = this.model.remitMoney;
            params.remitRemark = this.model.remitRemark;
            params.inDepositoryId = this.model.id;
            params.remitAccountId = this.model.remitAccountId;

            if (this.fileList.length > 0){
              params.annex = this.fileList[0].url;
            }

            httpAction(httpurl,params,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              this.close();
            })
          }

        })
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
      //已付款金额
      getRemitMoney(money){
        if (money != null){
          return money;
        }else {
          return 0;
        }
      },
      handleDelete(file){
        //如有需要新增 删除逻辑
        console.log(file)
      },
      initAccountData(){
        getAction(this.url.queryAccountList).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.accountData = res.result.records || res.result;
          }
        })
      },
      filterOptionAccount(input,option){
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      changeAccount(value){

      },
    }
  }
</script>